import 'package:flutter/material.dart';

/// 个人中心页面
/// 展示用户信息、功能菜单和统计信息
/// 学习StatelessWidget、Card、ListTile、GridView等Widget的使用
class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('个人中心'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        elevation: 0,
        actions: [
          // 设置按钮
          IconButton(icon: const Icon(Icons.settings), onPressed: () {}),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 用户信息卡片 - 展示用户基本信息
            _buildUserInfoCard(context),

            const SizedBox(height: 20),

            // 功能菜单 - 展示各种功能入口
            _buildMenuSection(context),

            const SizedBox(height: 20),

            // 统计信息 - 展示用户数据统计
            _buildStatsSection(context),
          ],
        ),
      ),
    );
  }

  /// 构建用户信息卡片
  /// 使用渐变背景、Stack布局展示用户头像和信息
  Widget _buildUserInfoCard(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(20),
      // 使用渐变背景，增加视觉效果
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Theme.of(context).colorScheme.primary,
            Theme.of(context).colorScheme.secondary,
          ],
          begin: Alignment.topLeft, // 渐变起始点
          end: Alignment.bottomRight, // 渐变结束点
        ),
        borderRadius: BorderRadius.circular(16), // 圆角边框
      ),
      child: Row(
        children: [
          // 用户头像 - 圆形头像
          CircleAvatar(
            radius: 40,
            backgroundColor: Colors.white.withOpacity(0.2), // 半透明白色背景
            child: const Icon(Icons.person, size: 40, color: Colors.white),
          ),
          const SizedBox(width: 16),
          // 用户信息区域
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 用户名称
                Text(
                  'Flutter 学习者',
                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 4),
                // 用户ID
                Text(
                  'ID: 12345678',
                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                    color: Colors.white.withOpacity(0.8), // 半透明白色
                  ),
                ),
                const SizedBox(height: 8),
                // VIP标签
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 12,
                    vertical: 4,
                  ),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2), // 半透明白色背景
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Text(
                    'VIP会员',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      color: Colors.white,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ],
            ),
          ),
          // 编辑按钮
          IconButton(
            icon: const Icon(Icons.edit, color: Colors.white),
            onPressed: () {},
          ),
        ],
      ),
    );
  }

  /// 构建功能菜单区域
  /// 使用ListTile展示各种功能入口，支持点击事件
  Widget _buildMenuSection(BuildContext context) {
    // 菜单项数据
    final menuItems = [
      {
        'icon': Icons.shopping_bag,
        'title': '我的订单',
        'subtitle': '查看所有订单',
        'trailing': '12',
      },
      {
        'icon': Icons.favorite,
        'title': '我的收藏',
        'subtitle': '收藏的商品',
        'trailing': '8',
      },
      {
        'icon': Icons.location_on,
        'title': '收货地址',
        'subtitle': '管理收货地址',
        'trailing': '3',
      },
      {
        'icon': Icons.payment,
        'title': '支付方式',
        'subtitle': '管理支付方式',
        'trailing': '2',
      },
      {
        'icon': Icons.support_agent,
        'title': '客服中心',
        'subtitle': '联系客服',
        'trailing': '',
      },
      {'icon': Icons.help, 'title': '帮助中心', 'subtitle': '常见问题', 'trailing': ''},
    ];

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: Theme.of(context).colorScheme.outline.withOpacity(0.2),
        ),
      ),
      child: Column(
        children: menuItems.asMap().entries.map((entry) {
          final index = entry.key;
          final item = entry.value;
          final isLast = index == menuItems.length - 1; // 是否为最后一项

          return Column(
            children: [
              // 菜单项
              ListTile(
                // 左侧图标
                leading: Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.primaryContainer,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Icon(
                    item['icon'] as IconData,
                    color: Theme.of(context).colorScheme.primary,
                    size: 20,
                  ),
                ),
                // 标题
                title: Text(
                  item['title'] as String,
                  style: Theme.of(
                    context,
                  ).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w600),
                ),
                // 副标题
                subtitle: Text(
                  item['subtitle'] as String,
                  style: Theme.of(
                    context,
                  ).textTheme.bodySmall?.copyWith(color: Colors.grey[600]),
                ),
                // 右侧内容
                trailing: (item['trailing'] as String).isNotEmpty
                    ? Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 2,
                        ),
                        decoration: BoxDecoration(
                          color: Theme.of(context).colorScheme.primary,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Text(
                          item['trailing'] as String,
                          style: Theme.of(context).textTheme.bodySmall
                              ?.copyWith(
                                color: Theme.of(context).colorScheme.onPrimary,
                                fontWeight: FontWeight.bold,
                              ),
                        ),
                      )
                    : const Icon(Icons.chevron_right), // 右箭头图标
                onTap: () {
                  _handleMenuTap(context, item['title'] as String);
                },
              ),
              // 分割线（最后一项不显示）
              if (!isLast)
                Divider(
                  height: 1,
                  indent: 56, // 与图标对齐
                  endIndent: 16,
                  color: Theme.of(context).colorScheme.outline.withOpacity(0.2),
                ),
            ],
          );
        }).toList(),
      ),
    );
  }

  /// 构建统计信息区域
  /// 使用GridView展示用户的各种统计数据
  Widget _buildStatsSection(BuildContext context) {
    // 统计数据
    final stats = [
      {'label': '积分', 'value': '1,234', 'icon': Icons.stars},
      {'label': '优惠券', 'value': '5', 'icon': Icons.local_offer},
      {'label': '余额', 'value': '¥99.99', 'icon': Icons.account_balance_wallet},
      {'label': '等级', 'value': 'Lv.5', 'icon': Icons.trending_up},
    ];

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: GridView.builder(
        shrinkWrap: true, // 自适应内容高度
        physics: const NeverScrollableScrollPhysics(), // 禁用滚动
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 2列布局
          crossAxisSpacing: 16, // 水平间距
          mainAxisSpacing: 16, // 垂直间距
          childAspectRatio: 2.5, // 宽高比
        ),
        itemCount: stats.length,
        itemBuilder: (context, index) {
          final stat = stats[index];
          return Card(
            elevation: 2, // 卡片阴影
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  // 统计图标
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.primaryContainer,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Icon(
                      stat['icon'] as IconData,
                      color: Theme.of(context).colorScheme.primary,
                      size: 20,
                    ),
                  ),
                  const SizedBox(width: 12),
                  // 统计信息
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        // 统计数值
                        Text(
                          stat['value'] as String,
                          style: Theme.of(context).textTheme.bodyLarge
                              ?.copyWith(fontWeight: FontWeight.bold),
                        ),
                        // 统计标签
                        Text(
                          stat['label'] as String,
                          style: Theme.of(context).textTheme.bodySmall
                              ?.copyWith(color: Colors.grey[600]),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  /// 处理菜单点击事件
  /// 显示点击提示，实际项目中可以导航到对应页面
  void _handleMenuTap(BuildContext context, String title) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('点击了: $title'),
        duration: const Duration(seconds: 1),
      ),
    );
  }
}
